<template>
	<!-- 总收益 -->
	<view class="container">
		<!-- 团队收益统计 -->
		<view class="header" v-show="current === 0">
			<image src="@/static/images/list_bg@2x.png"></image>
			<view class="header_box">
				<view class="total_title">总收益<text class="total_yuan">(元)</text></view>
				<view class="total_number">{{teamTotalfunds}}</view>
				<view class="header_content">
					<view class="details_box">
						<view class="box_title">
							今日收益(元)
						</view>
						<view class="box_number">
							{{teamTodayfunds}}
						</view>
					</view>
					<!-- 中间割线 -->
					<view class="details_border"></view>
					<view class="details_box">
						<view class="box_title">
							本月收益(元)
						</view>
						<view class="box_number">
							{{teamMonthfunds}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 本人收益统计 -->
		<view class="header" v-show="current === 1">
			<image src="@/static/images/list_bg@2x.png"></image>
			<view class="header_box">
				<view class="total_title">总收益<text class="total_yuan">(元)</text></view>
				<view class="total_number">{{myTotalfunds}}</view>
				<view class="header_content">
					<view class="details_box">
						<view class="box_title">
							今日收益(元)
						</view>
						<view class="box_number">
							{{myTodayfunds}}
						</view>
					</view>
					<!-- 中间割线 -->
					<view class="details_border"></view>
					<view class="details_box">
						<view class="box_title">
							本月收益(元)
						</view>
						<view class="box_number">
							{{myMonthfunds}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- tab切换 -->
			<subsection-list  :current="current" :list="lists" @sectionChange="sectionChange"></subsection-list>
			<!-- 团队收益数据 -->
			<view class="team" v-show="current === 0">
				<view class="team_box">
					<view class="team_content" v-for="(item, index) in teamData" :key="index">
					<view class="team_header">
						<view class="header_user">
							<view class="header_avatar">
								<image :src="item.avatar"></image>
							</view>
							<view class="title_box">
								<view class="nickName">
									{{item.nickname}}
								</view>
								<view class="level">
									{{item.partner_level_name?item.partner_level_name:'普通会员'}}
								</view>
							</view>
						</view>
						<view class="header_number">
								<view class="todayfunds">
									今日收益：<text class="today_number">{{item.today_sum}}元</text>
								</view>
								<view class="totalfunds">
									总收益：{{item.total_sum}}元
								</view>
						</view>
					</view>
					<!-- 中间割线 -->
					<view class="team_border"></view>
					<view class="team_footer">
						<view class="team_details">
							<view class="details_number">{{item.shop_sum}}</view>
							<view class="details_title">商品利润(元)</view>
						</view>
						<view class="team_details">
							<view class="details_number">{{item.profit_money}}</view>
							<view class="details_title">分润收益(元)</view>
						</view>
						<view class="team_details">
							<view class="details_number">{{item.promotion_money}}</view>
							<view class="details_title">推广收益(元)</view>
						</view>
					</view>
				</view>
				</view>
				<loading-footer :status="teamLoadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png" />
						<text class="nr muted">暂无记录～</text>
					</view>
				</loading-footer>
			</view>

			<!-- 本人收益数据 -->
			<view class="myself" v-show="current === 1">
				<!-- 选择查询 -->
				<view class="myself_header">
					<view class="myself_box">
						<view class="box_label">时间</view>
						<calendar ref="calendar" @change="calendarChange"></calendar>
					</view>
					<view class="myself_box">
						<view class="box_label">类型</view>
						<type-select :selectlist="selectlist" @confirm="typeConfirm"></type-select>
					</view>
				</view>
				
				<view class="myself_content">
					<view class="list_box">
						<view class="list_Item" v-for="(item, index) in myselfData" :key="index">
							<view class="list_Information">
								<view class="list_Img">
									<image src="@/static/images/cash@2x.png"></image>
								</view>
								<view class="list_title">
									<view class="title">
										{{item.source_type_text}}
									</view>
									<view class="source">
										系统
									</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_number">
									{{item.change_amount>0?'+'+item.change_amount:item.change_amount}}
								</view>
								<view class="list_date">
									{{item.create_time}}
								</view>
							</view>
						</view>
					</view>
					<loading-footer :status="myLoadingStatus" slotEmpty>
						<view class="data-null column-center" slot="empty">
							<image class="img-null" src="/static/images/order_null.png" />
							<text class="nr muted">暂无记录～</text>
						</view>
					</loading-footer>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		incomeType,
		totalRevenue,
		myRevenue
	} from '@/api/common.js'
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"
	export default {
		data() {
			return {
				lists: ['团队收益','本人收益'],
				//收益类型
				selectlist:[],
				// 团队数据统计
				teamTodayfunds: '0.00',
				teamMonthfunds: '0.00',
				teamTotalfunds: '0.00',
				myTodayfunds: '0.00',
				myMonthfunds: '0.00',
				myTotalfunds: '0.00',
				//团队列表数据
				teamData: [],
				teamPage: 1,
				teamLoadingStatus: loadingType.LOADING,
				//本人列表数据
				myselfData: [],
				myPage: 1,
				myLoadingStatus: loadingType.LOADING,
				current: 0,
				cate_type:0, // 类型
				startDate:'',
				endDate:''
				
			};
		},
		onLoad() {
			this.incomeType()
			this.getProfitView()
		},
		onReachBottom() {
			this.getProfitView()
		},
		methods: {
			incomeType(){
				incomeType().then(res=>{
					if(res.code == 1){
						this.selectlist = res.data;
					}
				})
			},
			// 标签页点击
			sectionChange(index) {
				this.current = index;
				this.getProfitView();
			},
			getProfitView(){
				if(this.current == 1){
					this.myRevenue();
				}else{
					this.totalRevenue();	
				}
			},
			totalRevenue(){
				let {
					teamData,
					teamLoadingStatus,
					teamPage
				} = this;
				loadingFun(totalRevenue, teamPage, teamData, teamLoadingStatus).then(res => {
					if (res) {
						this.teamPage = res.page;
						this.teamData = res.dataList;
						this.teamLoadingStatus = res.status
						this.teamTodayfunds = res.resData.today_sum;
						this.teamMonthfunds = res.resData.month_sum;
						this.teamTotalfunds = res.resData.total_sum;
					}
				})
			},
			myRevenue(){
				let {
					myselfData,
					myLoadingStatus,
					myPage,
					cate_type,
					startDate,
					endDate,
				} = this;
				loadingFun(myRevenue, myPage, myselfData, myLoadingStatus,{
					start_time:startDate,
					end_time:endDate,
					type:cate_type,
				}).then(res => {
					if (res) {
						this.myPage = res.page;
						this.myselfData = res.dataList;
						this.myLoadingStatus = res.status
						this.myTodayfunds = res.resData.today_sum;
						this.myMonthfunds = res.resData.month_sum;
						this.myTotalfunds = res.resData.total_sum;
					}
				})
			},
			cleanStatus() {
				// 清理状态
				this.myPage = 1;
				this.myselfData = [];
				this.myLoadingStatus = loadingType.LOADING
				this.myRevenue()
			},
			typeConfirm(value){
				this.cate_type = value;
				this.cleanStatus()
			},
			calendarChange(e){
				this.startDate = e.startDate;
				this.endDate = e.endDate;
				this.cleanStatus()
			}
		}
	};
</script>

<style scoped>
	.header {
		position: relative;
		width: 100%;
		height: 480rpx;
	}
	.header image{
		width: 100%;
		height: 100%;
	}
	.header_box{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 50rpx 0;
	}
	.total_title{
		height: 54rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #393F46;
		line-height: 54rpx;
		color: #FFFFFF;
	}
	.total_yuan{
		height: 54rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #393F46;
		line-height: 54rpx;
		color: #FFFFFF;
	}
	.total_number{
		height: 54rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
	}
	.header_content{
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.details_box{
		width: 45%;
	}
	.box_title{
		height: 54rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
	}
	.box_number{
		height: 54rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
	}
	.details_border{
		width: 2rpx;
		height: 54rpx;
		background-color: #D59C63;
	}
	.content{
		position: relative;
		top: -70rpx;
		width: 95%;
		margin: 0 auto;
	}
	.team{
		margin-top: 20rpx;
		width: 100%;
	}
	.myself{
		margin-top: 20rpx;
		width: 100%;
	}
	.team_content{
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	/* 团队列表头部区域 */
	.team_header{
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header_user{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header_avatar{
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}
	.header_avatar image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.title_box{
		margin-left: 20rpx;
	}
	.nickName{
		width: 300rpx;
		height: 48rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1D1F24;
		line-height: 48rpx;
		overflow:hidden; 
		text-overflow:ellipsis; 
		white-space:nowrap;
	}
	.level{
		margin-top: 10rpx;
		width: 150rpx;
		padding: 0 10rpx;
		height: 30rpx;
		border: 1rpx solid #EA4445;
		text-align: center;
		font-size: 24rpx;
		color: #EA4445;
		line-height: 30rpx;
		border-radius: 28rpx;
	}
	.header_number{
		margin-left: 20rpx;
	}
	.todayfunds{
		height: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: right;
		color: #393F47;
		line-height: 50rpx;
	}
	.today_number{
		height: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: right;
		color: #EA4445;
		line-height: 50rpx;
	}
	.totalfunds{
		height: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: right;
		color: #7F7F7F;
		line-height: 50rpx;
	}
	.team_border{
		width: 100%;
		height: 1rpx;
		background: #E6E6E6;
	}
	/* 团队列表底部区域 */
	.team_footer{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.team_details{
		padding: 10rpx;
		width: 30%;
		background: #FDF0F0;
		border-radius: 10rpx;
	}
	.details_number{
		height: 48rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		text-align: center;
		font-weight: bold;
		color: #1D1F24;
		line-height: 48rpx;
	}
	.details_title{
		height: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		text-align: center;
		font-weight: 500;
		color: #393F47;
		line-height: 48rpx;
	}
	.myself_content{
		overflow: hidden;
		border-radius: 10rpx;
	}
	/* 本人列表区域 */
	.list_Item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 37rpx 30rpx;
		background: #FFFFFF;
		margin-bottom: 2rpx;
	}
	.list_Information{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list_Img{
		width: 72rpx;
		height: 72rpx;
	}
	.list_Img image{
		width: 100%;
		height: 100%;
	}
	.list_title{
		margin-left: 20rpx;
	}
	.title{
		height: 30rpx;
		font-size: 28rpx;
		text-align: left;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1D1F24;
		line-height: 30rpx;
	}
	.source{
		margin-top: 10rpx;
		height: 30rpx;
		font-size: 24rpx;
		text-align: left;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 30rpx;
	}
	.list_number{
		height: 30rpx;
		font-size: 28rpx;
		text-align: right;
		font-family: PingFang SC;
		color: #EA4445;
		line-height: 30rpx;
	}
	.list_date{
		margin-top: 10rpx;
		height: 30rpx;
		font-size: 24rpx;
		text-align: right;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 30rpx;
	}
	.myself_header{
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.myself_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.box_label{
		height: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 48rpx;
	}
</style>
